<template>
  <div class="main" :style="{ 'background-color': props.backColor }">
    <!-- <div class="footer">
      <div class="bubbles">
        <div
          v-for="i in 128"
          :key="i"
          class="bubble"
          :style="{
            '--size': `${2 + Math.random() * 4}rem`,
            '--distance': `${6 + Math.random() * 4}rem`,
            '--position': `${-5 + Math.random() * 110}%`,
            '--time': `${2 + Math.random() * 2}s`,
            '--delay': `${-1 * (2 + Math.random() * 2)}s`,
          }"
        ></div>
      </div>
      <div class="content">
        <div class="content-leftlogo">
          <img src="@/assets/img/home/logo2.png" alt="" />
        </div>
        <div class="content-left">
          <div class="content-left-item">
            <el-icon class="icon" :size="15" color="#fff">
              <LocationInformation />
            </el-icon>
            <p>陕西省西安市莲湖区静安广场2号楼22楼</p>
          </div>
          <div class="content-left-item">
            <el-icon class="icon" :size="15" color="#fff"><Phone /></el-icon>
            <p>029 - 88866102 / 18192362927</p>
          </div>
          <div class="content-left-item">
            <el-icon class="icon" :size="15" color="#fff"><Message /></el-icon>
            <p>service@umengdata.com</p>
          </div>
        </div>
        <el-divider direction="vertical" />
        <div class="content-center">
          <ul @click="godetailPage(1)">
            网站首页
          </ul>
          <ul @click="godetailPage(2)">
            业务领域
          </ul>
          <ul>
            案例展示
            <li @click="godetailPage(4)">渠道数据采集</li>
            <li @click="godetailPage(5)">渠道数据清洗</li>
            <li @click="godetailPage(6)">企业AI助手</li>
            <li @click="godetailPage(7)">主数据管理</li>
            <li @click="godetailPage(8)">HR考勤数据汇总</li>
            <li @click="godetailPage(9)">集团审计管理</li>
          </ul>
          <ul @click="godetailPage(3)">
            关于我们
          </ul>
        </div>
        <div class="content-right">
          <img src="@/assets/img/qr.png" alt="" />
          <p>扫码咨询</p>
        </div>
      </div>
      <div class="footerBa">
        Copyright © 2021 西安友盟智能科技 版权所有
        ICP备案号：陕ICP备2024054777号
      </div>
    </div> -->
    <footer>
      <div class="wave-box">
        <div class="wave-list1">
          <img src="@/assets/img/02.png" />
        </div>
        <div class="wave-list2">
          <img src="@/assets/img/02.png" />
        </div>
        <div class="wave-list3">
          <img src="@/assets/img/01.png" />
        </div>
        <div class="wave-list4">
          <img src="@/assets/img/01.png" />
        </div>
      </div>
      <div class="footer-content">
        <div class="content">
          <div class="content-leftlogo">
            <img src="@/assets/img/home/logo2.png" alt="" />
          </div>
          <div class="content-left">
            <div class="content-left-item">
              <el-icon class="icon" :size="15" color="#fff">
                <LocationInformation />
              </el-icon>
              <p>陕西省西安市莲湖区静安广场2号楼22楼</p>
            </div>
            <div class="content-left-item">
              <el-icon class="icon" :size="15" color="#fff"><Phone /></el-icon>
              <p>029 - 88866102 / 18192362927</p>
            </div>
            <div class="content-left-item">
              <el-icon class="icon" :size="15" color="#fff"
                ><Message
              /></el-icon>
              <p>service@umengdata.com</p>
            </div>
          </div>
          <el-divider direction="vertical" />
          <div class="content-center">
            <ul @click="godetailPage(1)">
              网站首页
            </ul>
            <ul @click="godetailPage(2)">
              业务领域
            </ul>
            <ul>
              案例展示
              <li @click="godetailPage(4)">渠道数据采集</li>
              <li @click="godetailPage(5)">渠道数据清洗</li>
              <li @click="godetailPage(6)">企业AI助手</li>
              <li @click="godetailPage(7)">主数据管理</li>
              <li @click="godetailPage(8)">HR考勤数据汇总</li>
              <li @click="godetailPage(9)">集团审计管理</li>
            </ul>
            <ul @click="godetailPage(3)">
              关于我们
            </ul>
          </div>
          <div class="content-right">
            <img src="@/assets/img/qr.png" alt="" />
            <p>扫码咨询</p>
          </div>
        </div>
        <div class="footerBa">
          Copyright © 2021 西安友盟智能科技 版权所有
          ICP备案号：陕ICP备2024054777号
        </div>
      </div>
    </footer>
    <svg style="position: fixed; top: 100vh">
      <defs>
        <filter id="blob">
          <feGaussianBlur in="SourceGraphic" stdDeviation="10" result="blur" />
          <feColorMatrix
            in="blur"
            mode="matrix"
            values="1 0 0 0 0  0 1 0 0 0  0 0 1 0 0  0 0 0 19 -9"
            result="blob"
          />
        </filter>
      </defs>
    </svg>
  </div>

  <!-- <div class="content">
    <div class="content-left">
      <h2>联系我们</h2>
      <div class="content-left-item">
        <el-icon class="icon" :size="20" color="#fff">
          <LocationInformation />
        </el-icon>
        <p>陕西省西安市莲湖区静安广场2号楼22楼</p>
      </div>
      <div class="content-left-item">
        <el-icon class="icon" :size="20" color="#fff"><Phone /></el-icon>
        <p>400 - 8888 - 9999</p>
      </div>
      <div class="content-left-item">
        <el-icon class="icon" :size="20" color="#fff"><Message /></el-icon>
        <p>onli@outlook.com</p>
      </div>
      <el-input
        v-model="phoneNumber"
        style="max-width: 600px"
        placeholder="请输入您的联系电话"
      >
        <template #prepend>
          <el-button :icon="Phone" />
        </template>
        <template #append>
          <el-button
            style="
              width: 100px;
              background: #124fff;
              color: #fff;
              border-radius: 0;
            "
            >发送</el-button
          >
        </template>
      </el-input>
    </div>
    <div class="content-right">
      <img src="@/assets/img/home/bg1.png" alt="" />
      <p>扫码咨询</p>
    </div>
  </div> -->
</template>
<script setup lang="ts">
import { ref, reactive, defineProps } from "vue";
import { LocationInformation, Phone, Message } from "@element-plus/icons-vue"; // 引入 Edit 这个 svg组件
import { useRouter } from "vue-router";
const router = useRouter();
const props = defineProps({
  backColor: {
    type: String,
    default: "#FFF",
  },
});
const godetailPage = (i: number) => {
  if (i == 1) {
    router.push({
      name: "Home",
    });
  } else if (i == 2) {
    router.push({
      name: "Business",
    });
  } else if (i == 3) {
    router.push({
      name: "About",
    });
  } else if (i == 4) {
    // 渠道数据采集
    router.push({
      name: "Exampleitem2",
    });
  } else if (i == 5) {
    // 渠道数据清洗
    router.push({
      name: "Exampleitem3",
    });
  } else if (i == 6) {
    // AI分析助手
    router.push({
      name: "Exampleitem4",
    });
  } else if (i == 7) {
    // 主数据管理
    router.push({
      name: "Exampleitem",
    });
  } else if (i == 8) {
    // HR考勤数据汇总
    router.push({
      name: "Exampleitem5",
    });
  } else if (i == 9) {
    // 集团审计管理
    router.push({
      name: "Exampleitem6",
    });
  }
};
</script>
<style lang="scss" scoped>
:deep(.el-divider--vertical) {
  height: 9em;
}
.main {
  display: grid;
  grid-template-rows: 1fr 10rem auto;
  grid-template-areas: "main" "." "footer";
  overflow-x: hidden;
  // background: #f5f7fa;
  // min-height: 100vh;
  font-family: "Open Sans", sans-serif;
  .footer {
    z-index: 1;
    --footer-background: #ed5565;
    display: grid;
    position: relative;
    grid-area: footer;
    min-height: 12rem;
    .bubbles {
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      height: 1rem;
      background: var(--footer-background);
      filter: url("#blob");
      .bubble {
        position: absolute;
        left: var(--position, 50%);
        background: var(--footer-background);
        border-radius: 100%;
        animation: bubble-size var(--time, 4s) ease-in infinite var(--delay, 0s),
          bubble-move var(--time, 4s) ease-in infinite var(--delay, 0s);
        transform: translate(-50%, 100%);
      }
    }
  }
}

@keyframes bubble-size {
  0%,
  75% {
    width: var(--size, 4rem);
    height: var(--size, 4rem);
  }
  100% {
    width: 0rem;
    height: 0rem;
  }
}
@keyframes bubble-move {
  0% {
    bottom: -4rem;
  }
  100% {
    bottom: var(--distance, 10rem);
  }
}
footer {
  margin-top: 400px;
  z-index: 1;
  --footer-background: #ed5565;
  display: grid;
  position: relative;
  grid-area: footer;
  min-height: 12rem;
  .footer-content {
    background-color: pink;
    div {
      max-width: 1200px;
      margin: 0 auto;
      padding: 50px 0;
      div {
        width: 30%;
        display: inline-block;
        vertical-align: top;
      }
    }
    .contact-msg {
      width: 300px;
      list-style-type: none;
      margin: 0;
      padding: 0;
      li {
        margin: 10px 0;
        line-height: 24px;
        i {
          font-size: 14px;
          width: 14px;
          text-align: center;
          margin-right: 7px;
        }
      }
    }
  }

  .footer-content {
    z-index: 2;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 3rem 20rem;
    background: var(--footer-background);
    &-leftlogo {
      width: 10%;
      img {
        width: 100%;
      }
    }
    &-left {
      width: 30%;
      &-item {
        display: flex;
        align-items: center;
        margin-bottom: 15px;
        font-weight: 700;
        .icon {
          margin-right: 20px;
        }
      }
    }
    &-center {
      display: flex;
      justify-content: space-between;
      // width: 30%;
      ul {
        cursor: pointer;
        li {
          margin: 5px 0;
        }
      }
    }
    &-right {
      text-align: center;
      // width: 30%;
      img {
        width: 100px;
        height: 100px;
      }
    }
  }
  .footerBa {
    background-color: #d8525f;
    text-align: center;
    line-height: 40px;
    height: 40px;
  }
}
.contact-msg li {
}
// .contact-msg li .contact-msg li span {
//   display: inline-block;
//   width: calc(100% - 45px);
//   vertical-align: top;
//   line-height: 1.5em;
// }
.wave-box {
  position: relative;
  overflow: hidden;
  img {
    display: block;
    width: 100%;
  }
  .wave-list1 {
    animation: yidong 10s infinite linear;
  }
  .wave-list2 {
    position: absolute;
    top: 0;
    animation: yidong 10s 5s infinite linear;
    transform: translateX(100%);
  }
  .wave-list3 {
    position: absolute;
    top: 0;
    animation: yidong1 10s linear, yidong 20s 10s infinite linear;
  }
  .wave-list4 {
    position: absolute;
    top: 0;
    animation: yidong 20s infinite linear;
    transform: translateX(100%);
  }
}
@keyframes yidong {
  0% {
    transform: translateX(100%);
  }
  100% {
    transform: translateX(-100%);
  }
}
@keyframes yidong1 {
  0% {
    transform: translateX(0);
  }
  100% {
    transform: translateX(-100%);
  }
}

.footer-center {
  ul {
    padding: 0;
    margin: 0;
    width: 300px;
    li {
      list-style-type: none;
      display: flex;
      margin: 10px 0;
      i {
        margin-right: 10px;
        width: 16px;
        text-align: center;
      }
    }
  }
}
</style>
